<template>
  <view class="home">
    <!-- 你好 -->
    <view class="head">
      <image :src="userinfo.pic" class="head_picture"></image>
      <view class="head_text">
        (,,･∀･)ﾉ゛hello！{{userinfo.name}}~
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper" :indicator-dots="false" :autoplay="false" circular="true" next-margin="170rpx"
        @change="change">
        <swiper-item class="swiper-item  active">
          <view class="schedule_bgd border-style">
            <view class="top">
              <image src="https://tjwmy.com/%E5%A4%AA%E9%98%B3.png"></image>
              <text>{{weather}}</text>
            </view>
            <view class="body">
              <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="schedule">
                <view v-if="error">{{error.message}}</view>
                <view v-else>
                  <text style="font-size: 16rpx;"></text>
                  <view class="schedule" v-for="item in data" :key="item._id">
                    <view class="schedule_item" @longpress.native="rmItem(item._id)" @click.native="changeItem(item)">
                      <uni-icons type="circle"></uni-icons>
                      <view class="content">
                        <view class="name">
                          {{item.content}}
                        </view>
                        <view class="time">
                          {{item.time}}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </unicloud-db>
            </view>
            <view class="title">
              <img src="https://tjwmy.com/1.png" alt="icon">
              <text>今日计划</text>
              <navigator class="add" url="/subpkg/schedule_add/schedule_add">
                <uni-icons type="plus-filled" size="20"></uni-icons>
              </navigator>
            </view>

          </view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <view class="sentence_bgd border-style">
            <view class="picture"
              :style="{'background':'url('+background+')','background-size': '100% 100%','background-repeat': 'no-repeat','background-position': 'center'}">

            </view>
            <view class="sentence">
              <view class="e">{{sentence.en}}</view>
              <view class="c">{{sentence.cn}}</view>
            </view>
            <view class="title">
              <img src="https://tjwmy.com/icon/2.png" alt="icon">
              <text>每日一句</text>
              <navigator class="add" url="/subpkg/schedule_add/schedule_add">
                <uni-icons type="paperplane-filled" size="20"></uni-icons>
              </navigator>
            </view>
          </view>
        </swiper-item>
        <swiper-item class="swiper-item ">
          <view class="reciprocal_bgd border-style">
            <view class="top" style="align-self: flex-start;padding-left: 35rpx">
              <text>我已经活了{{liveday}}天</text>
            </view>
            <view class="body">
              <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="countdownday">
                <view v-if="error">{{error.message}}</view>
                <view v-else>
                  <text style="font-size: 16rpx;">长按删除/点击修改</text>
                  <view class="schedule" v-for="item in data" :key="item._id">
                    <view class="schedule_item" @longpress.native="rmItem(item._id)" @click.native="changeItem(item)">
                      <view class="cday_content">
                        <view class="name">
                          {{item.name}}
                        </view>
                        <view class="time">
                          {{item.time}}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </unicloud-db>
            </view>
            <view class="title">
              <img src="https://tjwmy.com/icon/3.png" alt="icon">
              <text>倒数日</text>
              <navigator class="add" url="/subpkg/schedule_add/schedule_add">
                <uni-icons type="plus-filled" size="20"></uni-icons>
              </navigator>
            </view>
          </view>
        </swiper-item>
        <swiper-item class="swiper-item ">
          <view class="happy_bgd border-style">
            <view class="top">
              <text>好累~~让我歇会~~~</text>
            </view>
            <view class="body">

              <text style="font-size: 16rpx;">长按删除/点击修改</text>
              <view class="schedule" v-for="item in recommenddata" :key="item._id">
                <view class="schedule_item" @longpress.native="rmItem(item._id)" @click.native="changeItem(item)">
                  <uni-icons :type="item.icon" size="20"></uni-icons>
                  <view class="content">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <uni-icons type="heart" size="20"></uni-icons>
                  </view>
                </view>
              </view>

            </view>
            <view class="title">
              <img src="https://tjwmy.com/1.png" alt="icon">
              <text>今日计划</text>
              <navigator class="add" url="/subpkg/schedule_add/schedule_add">
                <uni-icons type="plus-filled" size="20"></uni-icons>
              </navigator>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 搜索组件 -->
    <my-search @myClick="gotoSearch()"></my-search>
    <!-- 楼层 -->
    <view class="floor-box">
      <view class="expense">
        <view class="title">
          <view class="text-picture">
            <uni-section title="今日开销" type="line" class="text" titleFontSize="16px" color="#C9DD22">
            </uni-section>
            <img src="/static/icon/yuan.png" alt="元" class="picture">
            <text class="num">{{expense}}</text>
          </view>
          <uni-icons type="more-filled" @click="gotoExpense()"></uni-icons>
        </view>
        <view class="expense-input">
          <input focus placeholder="备注……" placeholder-class="placeholder_style" />
          <navigator url="../../subpkg/expense_add/expense_add">
            <uni-icons type="plusempty"></uni-icons>
          </navigator>

        </view>
      </view>
      <view class="mood">
        <view class="title">
          <uni-section title="今日心情" type="line" class="text" titleFontSize="16px" color="#EDD1D8">
          </uni-section>
          <uni-icons type="more-filled"></uni-icons>
        </view>
        <view class="expense-input">
          <input focus placeholder="hi~今天心情怎么样？" placeholder-class="placeholder_style" />
          <navigator url="../../subpkg/diary_add/diary_add">
            <uni-icons type="plusempty"></uni-icons>
          </navigator>
        </view>
      </view>
      <view class="week">
        <view class="title">
          <uni-section title="本周日程" type="line" class="text" titleFontSize="16px" color="#FFF138">
          </uni-section>
          <uni-icons type="more-filled"></uni-icons>
        </view>
        <view class="expense-input week-item">
          <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="schedule">
            <view v-if="error">{{error.message}}</view>
            <view v-else>
              <view class="week-schedule" v-for="item in data" :key="item._id">
                <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" class="checkbox" />
                <view class="schedule_item" @longpress.native="rmItem(item._id)" @click.native="changeItem(item)">

                  <view class="content">
                    {{item.content}}
                  </view>
                  <view class="week-time">
                    {{item.time}}
                  </view>
                </view>
              </view>
            </view>
          </unicloud-db>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userinfo: [],
        swiperActive: 0,
        // 1. 轮播图的数据列表
        weather: '晴 周二 8, 21:08 下午',
        schedule: ['做作业  11.8', '做作业  11.8', '做作业  11.8', '做作业  11.8', '做作业  11.8', '做作业  11.8'],
        expense: 100,
        background: 'https://tjwmy.com/my/sentence.png',
        sentence: {
          en: 'What we call "failure" is not falling down, but the staying down.',
          cn: '所谓“失败”不是跌倒，而是就此躺平。'
        },
        liveday: 6570,
        recommenddata: [{
          "name": '土豆煨牛腩',
          "icon": "fire-filled"
        }, {
          "name": '荔枝白月光',
          "icon": "fire-filled"
        }, {
          "name": '从你的全世界路过',
          "icon": "wallet-filled"
        }, {
          "name": '请以你的名字呼唤我',
          "icon": "fire-filled"
        }, {
          "name": '你要的全拿走',
          "icon": "headphones"
        }, {
          "name": '蜀南竹海',
          "icon": "pyq"
        }]
      }
    },
    onLoad() {
      this.getUser()
    },
    methods: {
      change(e) {
        this.swiperActive = e.detail.current
        console.log(e.detail.current);
      },
      navClickHandler(item) {
        if (item.name === '吃') {
          uni.switchTab({
            url: '/pages/recreation/recreation'
          })
        }
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
          // success: res => {},
          // fail: () => {},
          // complete: () => {}
        });
      },
      rmItem(id) {
        this.$refs.udb.remove(id)
      },
      changeItem(item) {
        uni.navigateTo({
          url: '/subpkg/changeItem/changeItem?item=' + JSON.stringify(item),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      gotoExpense() {
        uni.navigateTo({
          url: '/subpkg/expense/expense'
        })
      },
      getUser() {
        const db = uniCloud.database();
        db.collection('userinfo').get() //获取数据表的信息
          .then(res => {
            this.userinfo = res.result.data[0]
          })
          .catch(err => {
            console.log(err)
            uni.$showMsg()
          })
      }
    },
    watch: {
      swiperActive(newdata, olddata) {
        let swiper_items = document.querySelectorAll(".swiper-item")

        // console.log(swiper_items)
        swiper_items.forEach((item) => {
          item.classList.remove("active")
        })
        swiper_items[newdata].classList.add("active")
      }
    }
  }
</script>

<style lang="scss">
  // 头部
  .home {
    width: 100%;
  }

  .head {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #efefef;
    padding: 10rpx 5rpx;

    .head_picture {
      border: 1rpx solid;
      width: 64rpx;
      height: 64rpx;
      border-radius: 45rpx;
      border: 2rpx solid #fff;
      box-shadow: 0 1rpx 5rpx black;
    }

    .head_text {
      margin: 16rpx;
    }
  }

  .uni-margin-wrap {

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        // text-align: center;
        font: ceyyW02;
        margin-top: 10rpx;
        box-sizing: border-box;
        padding: 5% 5% 0;
        z-index: 1;
        transition: padding 0.5s;


      }

      .swiper-item.active {
        padding: 0 5% 0;
        transition: padding 0.5s;
        z-index: 1000;
        margin-left: 35rpx;

      }

      .border-style {
        border-radius: 30rpx;
        box-shadow:
          1px 2px 4px hsl(57, 8%, 92%);
        height: 90%;
        width: 75%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 15rpx;

        .top {
          display: flex;
          justify-content: space-between;


          image {

            width: 35rpx;
            height: 35rpx;
            margin-right: 5rpx;
          }
        }

        .body {
          display: flex;
          flex-direction: column;
          width: 80%;
          justify-content: center;
          overflow: auto;

          .schedule {
            margin-top: 15rpx;

            .schedule_item {
              display: flex;
              align-content: center;


              .content {
                margin-left: 15rpx;
                display: flex;
                width: 80%;
                justify-content: space-between;
              }

              .cday_content {
                width: 100%;
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }

        .title {
          display: flex;
          justify-content: space-between;
          width: 60%;

          align-self: flex-start;
          margin-left: 30rpx;
          margin-top: 20rpx;

          img {
            width: 35rpx;
            height: 35rpx;
          }

          navigator {
            width: 16rpx;
            height: 16rpx;
          }
        }

        .picture {
          width: 300rpx;
          height: 320rpx;
          border: #8FB2AC 1rpx solid;
          margin-top: 10rpx;
        }

        .sentence {
          margin: 0 25rpx;
          font-size: 15rpx;
        }
      }

      .schedule_bgd {

        background: linear-gradient(to bottom, #C5BEDA, #E8E7EF);
      }

      .sentence_bgd {
        background: linear-gradient(to bottom, #C9E3EE, #E7EFF4);
      }

      .reciprocal_bgd {
        background: linear-gradient(to bottom, #8FB2AC, #E6EBEB);
      }

      .happy_bgd {
        background: linear-gradient(to bottom, #AC8A63, #EBEAE9);

      }
    }
  }

  .nav-classify {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;

    .nav-item {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor-box {
    .title {
      height: 60rpx;
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text-picture {
        width: 350rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
          flex: 2;
          background-color: #f5f5f5;
        }

        .picture {
          width: 35rpx;
          height: 35rpx;
          opacity: 0.5;
          padding: 12px 0px;
        }

        .num {
          color: #c0c0c0;
          padding: 12px 5px;
        }
      }
    }

    .expense-input {
      background-color: whitesmoke;
      height: 100rpx;
      border-radius: 8rpx;
      box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0.19);
      margin: 20rpx 20rpx 10rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 35rpx;

      .placeholder_style {
        font-size: 30rpx;
      }
    }

    .mood {
      margin-top: 35rpx;
    }

    .week {
      margin-top: 35rpx;

      .week-item {
        height: 300rpx;
        align-items: flex-start;

        padding: 20rpx 50rpx;

        .week-schedule {
          display: flex;
          justify-content: space-between;
          width: 500rpx;

          .checkbox {
            flex: 3;
          }

          .schedule_item {
            display: flex;
            width: 400rpx;
            justify-content: space-between;

            .content {
              flex: 6;
            }
          }
        }
      }
    }
  }
</style>
